<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语单词消消乐</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: white;
        }
        
        .container {
            width: 90%;
            max-width: 1001px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        header {
            text-align: center;
            margin-bottom: 20px;
            position: relative;
        }
        
        .share-container {
            position: absolute;
            right: 10px;
            top: 10px;
        }
        
        .share-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .share-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        .share-options {
            position: absolute;
            top: 50px;
            right: 0;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            padding: 10px;
            display: none;
            flex-direction: column;
            gap: 10px;
            z-index: 100;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .share-options.show {
            display: flex;
        }
        
        .share-option {
            padding: 8px 15px;
            border-radius: 20px;
            background: linear-gradient(to right, #8e2de2, #4a00e0);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .share-option:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            background: linear-gradient(to right, #ff8a00, #da1b60);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .control-panel {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 15px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            margin-bottom: 20px;
        }
        
        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .btn-start {
            background: linear-gradient(to right, #00b09b, #96c93d);
            color: white;
        }
        
        .btn-end {
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            color: white;
        }
        
        .btn-upload {
            background: linear-gradient(to right, #8e2de2, #4a00e0);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .file-input {
            display: none;
        }
        
        .timer {
            font-size: 1.8rem;
            font-weight: bold;
            text-align: center;
            padding: 15px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 15px;
            margin: 0 10px;
            min-width: 180px;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .game-area {
            display: flex;
            gap: 20px;
            min-height: 400px;
        }
        
        .word-panel {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
        }
        
        .word-card {
            padding: 15px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            user-select: none;
        }
        
        .english-card {
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            color: #7c5295;
        }
        
        .chinese-card {
            background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
            color: #2c3e50;
        }
        
        .word-card.selected {
            transform: scale(1.05);
            box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.7);
            border: 2px solid gold;
        }
        
        .word-card.matched {
            visibility: hidden;
            opacity: 0;
            transform: scale(0);
            transition: all 0.5s ease;
        }
        
        .word-card.error {
            animation: shake 0.5s linear;
            background: linear-gradient(135deg, #ff5858 0%, #f09819 100%);
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }
        
        .message {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 15px 30px;
            border-radius: 50px;
            font-weight: bold;
            z-index: 100;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .message.success {
            background: linear-gradient(to right, #00b09b, #96c93d);
            opacity: 1;
        }
        
        .message.error {
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            opacity: 1;
        }
        
        .instructions {
            margin-top: 20px;
            text-align: center;
            font-size: 1.1rem;
            line-height: 1.6;
            background: rgba(0, 0, 0, 0.2);
            padding: 15px;
            border-radius: 15px;
        }
        
        .share-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .share-modal.show {
            opacity: 1;
            visibility: visible;
        }
        
        .modal-content {
            background: white;
            border-radius: 15px;
            padding: 30px;
            width: 90%;
            max-width: 500px;
            text-align: center;
            color: #333;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .modal-content h2 {
            margin-bottom: 20px;
            color: #4a00e0;
        }
        
        .share-link {
            display: flex;
            margin: 20px 0;
        }
        
        .share-link input {
            flex: 1;
            padding: 12px 15px;
            border: 2px solid #8e2de2;
            border-radius: 50px 0 0 50px;
            font-size: 16px;
        }
        
        .copy-btn {
            padding: 0 20px;
            background: linear-gradient(to right, #8e2de2, #4a00e0);
            color: white;
            border: none;
            border-radius: 0 50px 50px 0;
            cursor: pointer;
        }
        
        .social-share {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .facebook {
            background: #3b5998;
        }
        
        .twitter {
            background: #1da1f2;
        }
        
        .whatsapp {
            background: #25d366;
        }
        
        .email {
            background: #ff5722;
        }
        
        .social-btn:hover {
            transform: translateY(-5px);
        }
        
        .close-modal {
            margin-top: 20px;
            padding: 10px 20px;
            background: #ff416c;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
        }
        
        @media (max-width: 768px) {
            .game-area {
                flex-direction: column;
            }
            
            .control-panel {
                flex-direction: column;
                align-items: center;
            }
            
            .share-options {
                left: 0;
                right: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>英语单词消消乐</h1>
            <div class="share-container">
                <button class="share-btn" id="shareBtn">
                    <i class="fas fa-share-alt"></i>
                </button>
                <div class="share-options" id="shareOptions">
                    <button class="share-option" id="shareLinkBtn">
                        <i class="fas fa-link"></i> 复制链接
                    </button>
                    <button class="share-option" id="shareFacebookBtn">
                        <i class="fab fa-facebook"></i> Facebook
                    </button>
                    <button class="share-option" id="shareTwitterBtn">
                        <i class="fab fa-twitter"></i> Twitter
                    </button>
                    <button class="share-option" id="shareWhatsAppBtn">
                        <i class="fab fa-whatsapp"></i> WhatsApp
                    </button>
                </div>
            </div>
        </header>
        
        <div class="control-panel">
            <button class="btn btn-start" id="startBtn">开始游戏</button>
            <button class="btn btn-end" id="endBtn">结束游戏</button>
            <button class="btn btn-upload" id="uploadBtn">选择Excel文件</button>
            <input type="file" id="fileInput" class="file-input" accept=".xlsx, .xls">
            <div class="timer" id="timer">00:00:00</div>
        </div>
        
        <div class="game-area">
            <div class="word-panel" id="englishPanel"></div>
            <div class="word-panel" id="chinesePanel"></div>
        </div>
        
        <div class="instructions">
            <p>游戏说明: 首先从左侧选择英文单词，然后从右侧选择对应的中文翻译。匹配正确即可消除单词对！</p>
            <p>您可以使用自己的Excel文件（需包含英文和中文列），或直接使用默认单词库开始游戏。</p>
        </div>
    </div>
    
    <div class="message" id="message"></div>
    
    <div class="share-modal" id="shareModal">
        <div class="modal-content">
            <h2>分享游戏</h2>
            <p>复制以下链接分享给朋友：</p>
            <div class="share-link">
                <input type="text" id="gameLink" value="https://example.com/word-match-game" readonly>
                <button class="copy-btn" id="copyLinkBtn">
                    <i class="fas fa-copy"></i>
                </button>
            </div>
            <p>或通过社交媒体分享：</p>
            <div class="social-share">
                <a class="social-btn facebook" id="modalFacebook">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a class="social-btn twitter" id="modalTwitter">
                    <i class="fab fa-twitter"></i>
                </a>
                <a class="social-btn whatsapp" id="modalWhatsApp">
                    <i class="fab fa-whatsapp"></i>
                </a>
                <a class="social-btn email" id="modalEmail">
                    <i class="fas fa-envelope"></i>
                </a>
            </div>
            <button class="close-modal" id="closeModal">关闭</button>
        </div>
    </div>

    <script>
        // 默认单词库
        const defaultWordPairs = [
            { english: "apple", chinese: "苹果" },
            { english: "banana", chinese: "香蕉" },
            { english: "cat", chinese: "猫" },
            { english: "dog", chinese: "狗" },
            { english: "elephant", chinese: "大象" },
            { english: "flower", chinese: "花" },
            { english: "giraffe", chinese: "长颈鹿" },
            { english: "house", chinese: "房子" },
            { english: "internet", chinese: "互联网" },
            { english: "jacket", chinese: "夹克" },
            { english: "kangaroo", chinese: "袋鼠" },
            { english: "lion", chinese: "狮子" }
        ];
        
        // 游戏状态变量
        let wordPairs = [];
        let selectedEnglish = null;
        let selectedChinese = null;
        let matchedPairs = 0;
        let gameStarted = false;
        let startTime = 0;
        let timerInterval = null;
        
        // DOM元素
        const startBtn = document.getElementById('startBtn');
        const endBtn = document.getElementById('endBtn');
        const uploadBtn = document.getElementById('uploadBtn');
        const fileInput = document.getElementById('fileInput');
        const timer = document.getElementById('timer');
        const englishPanel = document.getElementById('englishPanel');
        const chinesePanel = document.getElementById('chinesePanel');
        const message = document.getElementById('message');
        const shareBtn = document.getElementById('shareBtn');
        const shareOptions = document.getElementById('shareOptions');
        const shareModal = document.getElementById('shareModal');
        const gameLink = document.getElementById('gameLink');
        const copyLinkBtn = document.getElementById('copyLinkBtn');
        const closeModal = document.getElementById('closeModal');
        
        // 初始化游戏
        function initGame() {
            wordPairs = [...defaultWordPairs];
            renderWordCards();
            
            // 设置实际分享链接
            gameLink.value = window.location.href;
        }
        
        // 渲染单词卡片
        function renderWordCards() {
            englishPanel.innerHTML = '';
            chinesePanel.innerHTML = '';
            
            // 打乱英文单词顺序
            const shuffledEnglish = [...wordPairs].sort(() => Math.random() - 0.5);
            // 打乱中文单词顺序
            const shuffledChinese = [...wordPairs].sort(() => Math.random() - 0.5);
            
            // 创建英文卡片
            shuffledEnglish.forEach((pair, index) => {
                const card = document.createElement('div');
                card.className = 'word-card english-card';
                card.textContent = pair.english;
                card.dataset.index = index;
                card.addEventListener('click', () => selectEnglish(card, pair));
                englishPanel.appendChild(card);
            });
            
            // 创建中文卡片
            shuffledChinese.forEach((pair, index) => {
                const card = document.createElement('div');
                card.className = 'word-card chinese-card';
                card.textContent = pair.chinese;
                card.dataset.index = index;
                card.addEventListener('click', () => selectChinese(card, pair));
                chinesePanel.appendChild(card);
            });
        }
        
        // 选择英文单词
        function selectEnglish(card, wordPair) {
            if (!gameStarted) {
                showMessage("请先开始游戏！", "error");
                return;
            }
            
            // 如果已经匹配，则不能选择
            if (card.classList.contains('matched')) {
                return;
            }
            
            // 清除之前的选择
            clearSelections();
            
            // 设置当前选择
            selectedEnglish = wordPair;
            card.classList.add('selected');
        }
        
        // 选择中文单词
        function selectChinese(card, wordPair) {
            if (!gameStarted || !selectedEnglish) {
                showMessage("请先选择一个英文单词！", "error");
                return;
            }
            
            // 如果已经匹配，则不能选择
            if (card.classList.contains('matched')) {
                return;
            }
            
            selectedChinese = wordPair;
            card.classList.add('selected');
            
            // 检查是否匹配
            checkMatch();
        }
        
        // 检查英文和中文是否匹配
        function checkMatch() {
            if (selectedEnglish.english === selectedChinese.english) {
                // 匹配成功
                matchSuccess();
            } else {
                // 匹配失败
                matchError();
            }
        }
        
        // 匹配成功
        function matchSuccess() {
            showMessage("匹配成功！", "success");
            
            // 标记匹配的卡片
            const englishCards = document.querySelectorAll('.english-card');
            const chineseCards = document.querySelectorAll('.chinese-card');
            
            englishCards.forEach(card => {
                if (card.textContent === selectedEnglish.english) {
                    card.classList.add('matched');
                }
            });
            
            chineseCards.forEach(card => {
                if (card.textContent === selectedChinese.chinese) {
                    card.classList.add('matched');
                }
            });
            
            matchedPairs++;
            
            // 检查游戏是否结束
            if (matchedPairs === wordPairs.length) {
                endGame();
                showMessage(`恭喜！你完成了所有单词匹配！用时: ${timer.textContent}`, "success");
            }
            
            // 重置选择
            selectedEnglish = null;
            selectedChinese = null;
        }
        
        // 匹配失败
        function matchError() {
            showMessage("匹配错误，请再试一次！", "error");
            
            const englishCards = document.querySelectorAll('.english-card');
            const chineseCards = document.querySelectorAll('.chinese-card');
            
            // 显示错误动画
            englishCards.forEach(card => {
                if (card.classList.contains('selected')) {
                    card.classList.add('error');
                }
            });
            
            chineseCards.forEach(card => {
                if (card.classList.contains('selected')) {
                    card.classList.add('error');
                }
            });
            
            // 延迟后清除错误状态
            setTimeout(() => {
                clearSelections();
                selectedEnglish = null;
                selectedChinese = null;
            }, 1000);
        }
        
        // 清除选择状态
        function clearSelections() {
            const selectedCards = document.querySelectorAll('.word-card.selected, .word-card.error');
            selectedCards.forEach(card => {
                card.classList.remove('selected');
                card.classList.remove('error');
            });
        }
        
        // 显示消息
        function showMessage(text, type) {
            message.textContent = text;
            message.className = 'message ' + type;
            
            setTimeout(() => {
                message.className = 'message';
            }, 2000);
        }
        
        // 开始游戏
        function startGame() {
            if (gameStarted) {
                showMessage("游戏已经开始了！", "error");
                return;
            }
            
            gameStarted = true;
            startTime = Date.now();
            matchedPairs = 0;
            
            // 启动计时器
            timerInterval = setInterval(updateTimer, 1000);
            
            // 渲染单词卡片
            renderWordCards();
            
            showMessage("游戏开始！请匹配单词。", "success");
        }
        
        // 结束游戏
        function endGame() {
            gameStarted = false;
            clearInterval(timerInterval);
        }
        
        // 更新计时器
        function updateTimer() {
            const elapsedTime = Date.now() - startTime;
            const seconds = Math.floor(elapsedTime / 1000) % 60;
            const minutes = Math.floor(elapsedTime / 1000 / 60) % 60;
            const hours = Math.floor(elapsedTime / 1000 / 60 / 60);
            
            timer.textContent = 
                `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        // 处理Excel文件上传
        function handleFileUpload(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            const reader = new FileReader();
            reader.onload = function(e) {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, { type: 'array' });
                
                // 获取第一个工作表
                const worksheet = workbook.Sheets[workbook.SheetNames[0]];
                
                // 将工作表转换为JSON
                const jsonData = XLSX.utils.sheet_to_json(worksheet);
                
                // 提取英文和中文单词对
                wordPairs = jsonData.map(row => {
                    // 尝试不同的列名
                    const english = row['English'] || row['english'] || row['英文'] || row['单词'] || '';
                    const chinese = row['Chinese'] || row['chinese'] || row['中文'] || row['翻译'] || '';
                    
                    return { english, chinese };
                }).filter(pair => pair.english && pair.chinese);
                
                if (wordPairs.length > 0) {
                    showMessage(`成功加载 ${wordPairs.length} 个单词对！`, "success");
                } else {
                    showMessage("未能从Excel中提取单词对，请检查格式！", "error");
                    wordPairs = [...defaultWordPairs];
                }
            };
            reader.readAsArrayBuffer(file);
        }
        
        // 分享功能
        function shareOnFacebook() {
            const url = encodeURIComponent(window.location.href);
            window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank');
        }
        
        function shareOnTwitter() {
            const url = encodeURIComponent(window.location.href);
            const text = encodeURIComponent("快来玩这个有趣的英语单词消消乐游戏！");
            window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, '_blank');
        }
        
        function shareOnWhatsApp() {
            const url = encodeURIComponent(window.location.href);
            const text = encodeURIComponent("快来玩这个有趣的英语单词消消乐游戏！");
            window.open(`https://wa.me/?text=${text}%20${url}`, '_blank');
        }
        
        function shareViaEmail() {
            const url = window.location.href;
            const subject = encodeURIComponent("英语单词消消乐游戏");
            const body = encodeURIComponent(`快来玩这个有趣的英语单词消消乐游戏：${url}`);
            window.location.href = `mailto:?subject=${subject}&body=${body}`;
        }
        
        function copyGameLink() {
            gameLink.select();
            document.execCommand('copy');
            showMessage("链接已复制到剪贴板！", "success");
        }
        
        // 事件监听
        startBtn.addEventListener('click', startGame);
        endBtn.addEventListener('click', endGame);
        uploadBtn.addEventListener('click', () => fileInput.click());
        fileInput.addEventListener('change', handleFileUpload);
        
        // 分享按钮事件
        shareBtn.addEventListener('click', () => {
            shareOptions.classList.toggle('show');
        });
        
        document.getElementById('shareLinkBtn').addEventListener('click', () => {
            shareOptions.classList.remove('show');
            shareModal.classList.add('show');
        });
        
        document.getElementById('shareFacebookBtn').addEventListener('click', shareOnFacebook);
        document.getElementById('shareTwitterBtn').addEventListener('click', shareOnTwitter);
        document.getElementById('shareWhatsAppBtn').addEventListener('click', shareOnWhatsApp);
        
        // 模态框分享按钮
        document.getElementById('modalFacebook').addEventListener('click', shareOnFacebook);
        document.getElementById('modalTwitter').addEventListener('click', shareOnTwitter);
        document.getElementById('modalWhatsApp').addEventListener('click', shareOnWhatsApp);
        document.getElementById('modalEmail').addEventListener('click', shareViaEmail);
        
        copyLinkBtn.addEventListener('click', copyGameLink);
        closeModal.addEventListener('click', () => {
            shareModal.classList.remove('show');
        });
        
        // 点击模态框外部关闭
        shareModal.addEventListener('click', (e) => {
            if (e.target === shareModal) {
                shareModal.classList.remove('show');
            }
        });
        
        // 初始化游戏
        initGame();
    </script>
</body>
</html>